<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RabbitMQ 数据推送监控</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 20px;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #eee;
        }
        .header h1 {
            color: #333;
            margin: 0;
        }
        .header p {
            color: #666;
            margin: 10px 0 0 0;
        }
        .stats {
            display: flex;
            justify-content: space-around;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }
        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            min-width: 150px;
            margin: 10px;
        }
        .stat-card.normal {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }
        .stat-card.delayed {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        }
        .stat-card.no-data {
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
        }
        .stat-number {
            font-size: 2em;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .stat-label {
            font-size: 0.9em;
            opacity: 0.9;
        }
        .refresh-btn {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            margin-bottom: 20px;
        }
        .refresh-btn:hover {
            background: #0056b3;
        }
        .topics-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        .topics-table th,
        .topics-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        .topics-table th {
            background-color: #f8f9fa;
            font-weight: bold;
            color: #333;
        }
        .topics-table tr:hover {
            background-color: #f5f5f5;
        }
        .status {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }
        .status.normal {
            background-color: #d4edda;
            color: #155724;
        }
        .status.delayed {
            background-color: #fff3cd;
            color: #856404;
        }
        .status.no-data {
            background-color: #f8d7da;
            color: #721c24;
        }
        .time-diff {
            font-family: monospace;
            font-size: 12px;
        }
        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .last-update {
            text-align: right;
            color: #666;
            font-size: 12px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>RabbitMQ 数据推送监控</h1>
            <p>实时监控数据中台接收源端ActiveMQ消息推送情况</p>
        </div>

        <button class="refresh-btn" onclick="loadMonitorData()">刷新数据</button>
        <div id="error-message"></div>

        <div class="stats" id="stats">
            <div class="loading">加载中...</div>
        </div>

        <table class="topics-table" id="topics-table" style="display: none;">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>Topic名称</th>
                    <th>描述</th>
                    <th>状态</th>
                    <th>最新数据时间</th>
                    <th>时间差</th>
                    <th>消息数量</th>
                </tr>
            </thead>
            <tbody id="topics-tbody">
            </tbody>
        </table>

        <div class="last-update" id="last-update"></div>
    </div>

    <script>
        // 格式化时间差
        function formatTimeDiff(seconds) {
            if (seconds === null || seconds === undefined) {
                return '无数据';
            }
            
            if (seconds < 60) {
                return seconds + '秒';
            } else if (seconds < 3600) {
                return Math.floor(seconds / 60) + '分钟';
            } else if (seconds < 86400) {
                return Math.floor(seconds / 3600) + '小时';
            } else {
                return Math.floor(seconds / 86400) + '天';
            }
        }

        // 格式化时间
        function formatDateTime(dateTimeStr) {
            if (!dateTimeStr) {
                return '无数据';
            }
            const date = new Date(dateTimeStr);
            return date.toLocaleString('zh-CN');
        }

        // 获取状态样式类
        function getStatusClass(status) {
            switch (status) {
                case 'NORMAL':
                    return 'normal';
                case 'DELAYED':
                    return 'delayed';
                case 'NO_DATA':
                    return 'no-data';
                default:
                    return '';
            }
        }

        // 加载监控数据
        async function loadMonitorData() {
            try {
                const response = await fetch('/rabbitmq-monitor/api/rabbitmq/status');
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const data = await response.json();
                
                displayStats(data.statistics);
                displayTopics(data.topics);
                updateLastUpdate(data.currentTime);
                
                document.getElementById('error-message').innerHTML = '';
                document.getElementById('topics-table').style.display = 'table';
                
            } catch (error) {
                console.error('加载监控数据失败:', error);
                document.getElementById('error-message').innerHTML = 
                    `<div class="error">加载监控数据失败: ${error.message}</div>`;
                document.getElementById('stats').innerHTML = '<div class="loading">加载失败</div>';
            }
        }

        // 显示统计信息
        function displayStats(statistics) {
            const statsHtml = `
                <div class="stat-card normal">
                    <div class="stat-number">${statistics.normalTopics}</div>
                    <div class="stat-label">正常</div>
                </div>
                <div class="stat-card delayed">
                    <div class="stat-number">${statistics.delayedTopics}</div>
                    <div class="stat-label">延迟</div>
                </div>
                <div class="stat-card no-data">
                    <div class="stat-number">${statistics.noDataTopics}</div>
                    <div class="stat-label">无数据</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">${statistics.totalTopics}</div>
                    <div class="stat-label">总计</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">${statistics.totalMessages}</div>
                    <div class="stat-label">消息总数</div>
                </div>
            `;
            document.getElementById('stats').innerHTML = statsHtml;
        }

        // 显示Topic列表
        function displayTopics(topics) {
            const tbody = document.getElementById('topics-tbody');
            tbody.innerHTML = '';
            
            topics.forEach(topic => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${topic.code}</td>
                    <td>${topic.topicName}</td>
                    <td>${topic.description}</td>
                    <td><span class="status ${getStatusClass(topic.status)}">${topic.status}</span></td>
                    <td>${formatDateTime(topic.lastDataTime)}</td>
                    <td class="time-diff">${formatTimeDiff(topic.timeDiffSeconds)}</td>
                    <td>${topic.messageCount || 0}</td>
                `;
                tbody.appendChild(row);
            });
        }

        // 更新最后更新时间
        function updateLastUpdate(currentTime) {
            const lastUpdate = document.getElementById('last-update');
            lastUpdate.textContent = `最后更新时间: ${formatDateTime(currentTime)}`;
        }

        // 页面加载时自动加载数据
        document.addEventListener('DOMContentLoaded', function() {
            loadMonitorData();
            
            // 每30秒自动刷新一次
            setInterval(loadMonitorData, 30000);
        });
    </script>
</body>
</html> 